<template>
    <example :template-code="templateString">
        <template #describe>
            <t :id="`${$t('弹窗选择器(单选)')}`">{{ $t('弹窗选择器(单选)') }}</t>
            <li>
                该控件的配置项基本与<span class="s-code">Table</span>组件是一致的；
                查询模块使用<span class="d-code">search-config</span>，
                表格列配置使用<span class="d-code">table-column</span>，
                列表数据使用<span class="d-code">table-data</span>等等，更多配置项请参照
                <span class="s-code pointer" @click="viewAttributes">【Table】组件</span>
            </li>
            <li>当前已选择：<span class="s-code-gray">{{ selections && selections.length ? selections : '--' }}</span></li>
        </template>
        <el-button type="primary" @click="visible = true">点击打开弹窗选择器(单选)</el-button>
        <sib-table-picker
            title="弹窗选择器(单选)"
            v-model="visible"
            :search-config="searchConfig"
            :table-column="tableColumn"
            :table-data="tableData"
            @confirm="confirm">
        </sib-table-picker>
    </example>
</template>

<script>
import { ref, nextTick } from 'vue';
import { useRouter } from 'vue-router';

export default {
    setup() {
        const router = useRouter();
        const selections = ref([]);
        const visible = ref(false);

        return {
            visible,
            selections,
            searchConfig: {
                fields: [{ label: '姓名', code: 'name', type: 'text' }],
            },
            tableColumn: [
                { label: '姓名', code: 'name' },
                { label: '人员编码', code: 'code' },
            ],
            tableData: [
                { name: '张三', code: '001', id: '1' },
                { name: '李四', code: '002', id: '2' },
                { name: '王五', code: '003', id: '3' },
                { name: '奔跑的提款机', code: '666', id: '4' },
                { name: '前端爱好者', code: '004', id: '5' },
                { name: '菜鸟', code: '005', id: '6' },
                { name: '旗鼓相当的对手', code: '006', id: '7' },
            ],
            confirm(rows) {
                selections.value = rows;
            },
            viewAttributes() {
                window.NProgress.start();

                setTimeout(() => {
                    router.push('/table').then(() => {
                        nextTick(() => {
                            setTimeout(() => {
                                window.NProgress.done();
                                const attributesDom = document.getElementById('Table 属性') || document.getElementById('attributes');
                                if (attributesDom) attributesDom.scrollIntoView({ behavior: 'smooth', inline: 'nearest' });
                            }, 2000);
                        });
                    });
                }, 300);
            },
            templateString: `<template>
    <p>当前已选择：{{ selections && selections.length ? selections : '--' }}</p>
    <el-button type="primary" @click="visible = true">点击打开弹窗选择器(单选)</el-button>
    <sib-table-picker
        title="弹窗选择器(单选)"
        v-model="visible"
        :search-config="searchConfig"
        :table-column="tableColumn"
        :table-data="tableData"
        @confirm="confirm">
    </sib-table-picker>
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const selections = ref([]);
        const visible = ref(false);

        return {
            visible,
            selections,
            searchConfig: {
                fields: [{ label: '姓名', code: 'name', type: 'text' }],
            },
            tableColumn: [
                { label: '姓名', code: 'name' },
                { label: '人员编码', code: 'code' },
            ],
            tableData: [
                { name: '张三', code: '001', id: '1' },
                { name: '李四', code: '002', id: '2' },
                { name: '王五', code: '003', id: '3' },
                { name: '奔跑的提款机', code: '666', id: '4' },
                { name: '前端爱好者', code: '004', id: '5' },
                { name: '菜鸟', code: '005', id: '6' },
                { name: '旗鼓相当的对手', code: '006', id: '7' },
            ],
            confirm(rows) {
                selections.value = rows;
            },
        };
    },
};
<\/script>`,
        };
    },
};
</script>

<style lang="scss">
.pointer {
    cursor: pointer;
    text-decoration-line: underline;
}
</style>
